import { ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons'
import Bread from '@/component/bread/bread'
import { Input, InputRef, message, Modal, Space, Table } from 'antd'
import EditModal from './editModal/editModal'
import axios from '@/http'
import type { ColumnsType } from 'antd/lib/table'
import React, { createContext, useContext, useEffect, useRef, useState } from 'react'
import { TStore, TBlog } from '@type'
import { AppContext } from '@/App'
import { bound, formatTime } from '@/util'
import Comment from './comment/comment'

export const BlogContext = createContext<TBlog>({
  abstract: '',
  collectNum: 0,
  content: '',
  id: 0,
  goodNum: 0,
  title: '',
  time: '',
  way: '',
  seeNum: 0
})
const { confirm } = Modal
const Blog: React.FC = () => {
  const {
    store: { status }
  } = useContext<TStore>(AppContext)
  const columns: ColumnsType<TBlog> = [
    { title: 'Id', dataIndex: 'id', key: 'id' },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      width: '25%'
    },
    { title: '观看数', dataIndex: 'seeNum', key: 'seeNum' },
    { title: '点赞数', dataIndex: 'goodNum', key: 'goodNum' },
    { title: '收藏数', dataIndex: 'collectNum', key: 'collectNum' },
    {
      title: '完成时间',
      dataIndex: 'time',
      key: 'time',
      width: 200,
      render: (_, { time }) => {
        return <>{formatTime(time)}</>
      }
    },
    { title: '方向', dataIndex: 'way', key: 'way', width: 160 },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      width: '10%',
      render: (_, data) => {
        const { id } = data
        return (
          <Space size="middle">
            <a onClick={() => showModal(id)}>编辑</a>
            <a onClick={() => showDeleteConfirm(id)} style={{ color: 'red' }}>
              删除
            </a>
          </Space>
        )
      }
    }
  ]

  const showDeleteConfirm = (id: number) => {
    confirm({
      title: '删除博客?',
      icon: <ExclamationCircleOutlined />,
      content: '你确定要删除该博客？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        startDel(id)
      }
    })
  }
  const startDel = (id: number) => {
    axios
      .post('/blog/del', {
        status,
        id
      })
      .then(res => {
        if (res.data.error === -1) {
          message.success('删除成功')
          getBlogList()
        }
      })
  }
  const bread = ['博客', '博客管理']

  const [blogList, setBlogList] = useState<TBlog[]>([])
  const [blogAllList, setBlogAllList] = useState<TBlog[]>([])
  const getBlogList = () => {
    axios.get('/blog/alllist').then(res => {
      if (res.data.error === -1) {
        setBlogList(res.data.data)
        setBlogAllList(res.data.data)
      }
    })
  }
  useEffect(() => {
    getBlogList()
  }, [])
  const editModalDom = useRef<{ showModal: Function }>(null)
  const [blogInfo, setBlogInfo] = useState<TBlog>({
    abstract: '',
    collectNum: 0,
    content: '',
    id: 0,
    goodNum: 0,
    title: '',
    time: '',
    way: '',
    seeNum: 0
  })
  const showModal = (id: number) => {
    axios
      .get('/blog/detail', {
        params: {
          id
        }
      })
      .then(res => {
        setBlogInfo(res.data.data)
      })
    editModalDom.current && editModalDom.current.showModal()
  }
  const inputDom = useRef<InputRef>(null)
  const onChange = () => {
    bound(() => {
      const title = inputDom.current?.input?.value
      const filterMessage = title ? blogAllList.filter(item => item.title.indexOf(title) !== -1) : blogAllList
      setBlogList(filterMessage)
    })
  }
  return (
    <div>
      <Bread bread={bread}></Bread>
      <Input
        onChange={onChange}
        ref={inputDom}
        style={{ width: '200px', float: 'right', marginBottom: '16px' }}
        placeholder="根据标题搜索"
        suffix={<SearchOutlined style={{ color: 'rgba(0,0,0,.45)' }} />}
      />
      <Table
        rowKey={record => record.id}
        columns={columns}
        scroll={{ y: 450 }}
        expandable={{
          expandedRowRender: record => <Comment id={record.id}></Comment>
        }}
        dataSource={blogList}
      />
      <BlogContext.Provider value={blogInfo}>
        <EditModal ref={editModalDom} search={getBlogList}></EditModal>
      </BlogContext.Provider>
    </div>
  )
}

export default Blog
